﻿@model EcoTourEduca.BingYourMaps.ViewModels.EditBingMapsAreaViewModel
@using EcoTourEduca.BingYourMaps
@using EcoTourEduca.BingYourMaps.Models
@{
	Style.Include("map");
	Script.Require("jQuery");
	Script.Include("http://ecn.dev.virtualearth.net/mapcontrol/mapcontrol.ashx?v=7.0&onscriptload=initMap");
	Script.Include("maplist.js");
	
	// Set size with units
    var width = (Model.MapWidth != null && Model.MapWidth > 0) ? Model.MapWidth + "pt" : "100%";
	var height = Model.MapHeight + "pt";
}
@using(Script.Foot()) 
{
    <script type="text/javascript">
	    var map;
	    var pin;

	    function getDimension(d)
	    {
		    return (d === "" || d === "0") ? "100%" : parseInt(d, 10);
	    }

	    function onTextLatLongChange()
	    {
		    var loc = newLocation($("#CenterLatitudeStr").val(), $("#CenterLongitudeStr").val());
		    map.setView({center:loc});
	    }

	    function onTextMapTypeChange()
	    {
		    map.setView({ mapTypeId: $("#MapType").val() });
	    }

	    function resetMapSize() 
	    {
	        var w = getDimension($("#MapWidth").val());
	        var h = getDimension($("#MapHeight").val());
		    $("#BingEditMap").width(w);
		    $("#BingEditMap").height(h);
		    map.setOptions({width: w, height: h});
	    }

	    function onTextHeightChange() {
		    resetMapSize();
	    }

	    function onTextWidthChange() {
		    resetMapSize();
	    }

	    function onViewChange() {
		    var z = Math.floor(map.getZoom());
		    $("#MapZoom").val(z);

		    var loc = map.getCenter();
		    $("#CenterLatitudeStr").val(loc.latitude);
		    $("#CenterLongitudeStr").val(loc.longitude);
	    }

	    function onTypeChange() {
		    $("#MapType").val(map.getMapTypeId());
	    }

	    function onZoomTextSet() {
		    var z = parseInt($("#MapZoom").val(), 10);
		    map.setView({zoom: z});
	    }

	    function initMap() {
		    var loc = newLocation(@Model.CenterLatitudeStr, @Model.CenterLongitudeStr);
	        map = newMap("BingEditMap",
                loc,
                @Model.MapZoom,
                "@(Ajax.JavaScriptStringEncode(Model.MapType))");
		
		    @{
                var c = 0; 
                var cCount = Model.BingMapsLocations.Count() - 1;
            }
		    var pins = [
		        @foreach (BingMapsLocationPart locationPart in Model.BingMapsLocations)
		        {
                    <text>
                    {
                        Id: @(locationPart.ContentItem.Id),
                        Lat: @Html.ToInvariantCultureString((float)locationPart.Latitude),
                        Lng: @Html.ToInvariantCultureString((float)locationPart.Longitude),
                        Title: "@Ajax.JavaScriptStringEncode(Model.Titles[c])",
                        Icon: "@Ajax.JavaScriptStringEncode(locationPart.PinIcon)",
                        Url: "@Url.ItemDisplayUrl(locationPart.ContentItem)"
                    }
                    </text>
                    if (c < cCount) { @(",") }
                    c++;
                }
		    ];
	        addPins(pins, map, "@Model.PinIconsFolder");

		    Microsoft.Maps.Events.addHandler(map, "viewchangeend", onViewChange);
		    Microsoft.Maps.Events.addHandler(map, "maptypechanged", onTypeChange);
	    }
	    $(window).load(initMap);

	    $(function() {
		    $("fieldset legend").expandoControl(function (controller) { return controller.nextAll(".expando"); }, { collapse: true, remember: false });
		    $("#Zoom").change(onZoomTextSet);
		    $("#MapWidth").change(onTextWidthChange);
		    $("#MapHeight").change(onTextHeightChange);
		    $("#CenterLatitudeStr").change(onTextLatLongChange);
		    $("#CenterLongitudeStr").change(onTextLatLongChange);
		    $("#MapType").change(onTextMapTypeChange);
	    });
    </script>
}
<fieldset>
	<legend>Bing Maps area</legend>
    <div class="editor-label">
        @Html.LabelFor(m => m.FriendlyName)
	</div>
	<div class="editor-field">
		@Html.TextBoxFor(m => m.FriendlyName)
		@Html.ValidationMessageFor(m => m.FriendlyName)
	</div>
	<div id="BingEditMap" 
        class="BingMapsLocation" 
        style="position:relative; 
        width:@(width); 
        height:@(height);">
	</div>	
</fieldset>

<fieldset style="clear: both;">
	<legend>@T("Map properties")</legend>
	<div class="expando">
        <!-- Map Width -->
		<div class="editor-label">
			@Html.LabelFor(m => m.MapWidth)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.MapWidth)
			@Html.ValidationMessageFor(m => m.MapWidth)
		</div>

        <!-- Map Height -->
		<div class="editor-label">
			@Html.LabelFor(m => m.MapHeight)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.MapHeight)
			@Html.ValidationMessageFor(m => m.MapHeight)
		</div>
        @*<div class="editor-button">
            <input type="button" value="Reset to default value" onclick="resetMapHeight()"/>
        </div>*@
	
        <!-- CenterLatitude & CenterLongitude -->
		<div class="editor-label">
			@Html.LabelFor(m => m.CenterLatitudeStr)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.CenterLatitudeStr)
			@Html.ValidationMessageFor(m => m.CenterLatitudeStr)
		</div>
		<div class="editor-label">
			@Html.LabelFor(m => m.CenterLongitudeStr)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.CenterLongitudeStr)
			@Html.ValidationMessageFor(m => m.CenterLongitudeStr)
		</div>

        <!-- MapZoom -->
		<div class="editor-label">
			@Html.LabelFor(m => m.MapZoom)
		</div>
		<div class="editor-field">
			@Html.TextBoxFor(m => m.MapZoom)
			@Html.ValidationMessageFor(m => m.MapZoom)
		</div>

        <!-- MapType -->
		<div class="editor-label">
			@Html.LabelFor(m => m.MapType)
		</div>
		<div class="editor-field">
			@Html.DropDownListFor(m => m.MapType, Model.MapTypeList)
			@Html.ValidationMessageFor(m => m.MapType)
		</div>
	</div>
</fieldset>